<template>
  <div>
    <!-- 下拉刷新
    disabled 是否禁用下拉刷新 这里是把disabled的值和finished绑定，finished的值就是disabled的值，finished判断所有数据是否加载完毕，当finished为true的时候，数据加载完毕，也该禁用下拉刷新，即disabled为true
     -->
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      :disabled="finished"
    >
      <!-- 上拉加载更多
    immediate-check 默认为true 刚进入就触发load事件 但是有的时候不好使
     -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
      >
        <!-- 循环生成文章的item项组件 -->
        <ArtItem
          v-for="item in artList"
          :key="item.id"
          :article="item"
          @remove-article="removeArticle"
        ></ArtItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 导入需要的API接口
import { getArtListAPI } from '../../api/homeAPI'
// 导入文章item项组件
import ArtItem from '@/components/ArtItem/ArtItem.vue'

export default {
  name: 'ArtList',
  components: {
    ArtItem
  },
  // 为文章列表组件封装名为channelId的props，表示要加载到哪个频道下的文章列表数据
  props: {
    // 频道的id
    channelId: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      // 文章列表的数据
      artList: [],
      // 调用API接口要传递的时间戳
      timestamp: Date.now(),
      //
      loading: true,
      // 所有数据是否加载完毕
      finished: false,
      // 当前是否正在下拉刷新
      isLoading: false
    }
  },
  created () {
    console.log('cre请求')
    this.initArtList()
  },
  methods: {
    // 炸楼
    removeArticle (id) {
      console.log(id)
      this.artList = this.artList.filter(item => item.art_id !== id)
      // 每次删除了一条文章数据之后，立即判断剩下的数据条数是否小于10，如果小于10，则自动请求下一页数据，防止出现页面空白导致上拉加载不生效的情况
      if (this.artList.length < 10) {
        this.initArtList()
      }
    },
    // 触发了下拉刷新
    onRefresh () {
      console.log('下拉刷新')
      // 请求下拉刷新的数据，把请求到的数据添加到头部（新数据在前旧数据在后）
      this.initArtList(true)
    },
    // 触发了上拉加载更多onload事件
    onLoad () {
      console.log('上拉加载更多，load加载请求')
      // 在load事件中，调用initArtList方法，加载下一页数据。下一页数据请求之后应该拼接到旧数据之后
      this.initArtList()
    },
    // 初始化文章的列表数据 isPullDown是一个布尔值，如果为true，表示用户执行的是下拉刷新的动作；不传就是undefined，会被转成false，执行上拉加载
    async initArtList (isPullDown) {
      const { data: res } = await getArtListAPI(this.channelId, this.timestamp)
      // 数据请求成功后
      // 1、为timestamp赋值
      // 2、为artList赋值
      console.log(res)
      if (res.message === 'OK') {
        // 为timestamp赋值
        this.timestamp = res.data.pre_timestamp
        // 为artList赋值
        if (isPullDown) {
          // 下拉刷新
          // this.artList = [...新数据,...旧数据]
          this.artList = [...res.data.results, ...this.artList]
        } else {
          // 上拉加载
          // this.artList = res.data.results // 这是新数据覆盖旧数据，旧数据没了，应该是新数据拼接到旧数据之后
          // this.artList = [...旧数据,...新数据]
          this.artList = [...this.artList, ...res.data.results]
        }

        // 当数据请求回来以后，一定要loading重置为false，否则无法发起下一次请求
        this.loading = false
        // 把isLoading重置为false，不然无法发起下一次下拉刷新
        this.isLoading = false
        console.log('artList', this.artList)
        // 判断所有数据是否加载完毕
        if (res.data.pre_timestamp === null) {
          this.finished = true
        }
      }
    }
  }

}
</script>

<style lang="less" scoped>
</style>
